<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>register</title>
</head>
<body>
<div id="registrationDiv">
    <form id="form">
    <h1 id="registrationMsg">REGISTER</h1>
      <span id="register_err" class="err_msg" style="display : none">注册失败</span>
    <span id="username_err" class="err_msg" style="display : none">用户名已存在</span>
    <p>Username: <input id="username" name="username" type="text" required></p>
    <span id="password_err" class="err_msg" style="display : none">密码要在6-15位</span>
    <p>Password: <input id="password" name="password" type="password" required></p>
    <p>Email: <input id="email" name="email" type="email" required></p>
    <p>Phone: <input id="phone" name="phone" type="tel"></p>
        <p>Head:  <input type="file" name="file"><br></p>

    <div id="subDiv">

        <p class="inputs">
          <td>checkCode:</td>
          <input name="checkCode" type="text" id="checkCode">
          <img id="checkCodeImg" src="/MVCDemo/auto/checkCode">
          <a href="#" id="changeImg">看不清？</a>
        </p>

      <input type="button" class="button" value="注册" id="registerButton">
      <input type="reset" class="button" value="清除">

    </div><a href="login.html">已有账号？点击登陆</a>
  </form>
</div>


<script src="js/axios-0.18.0.js"></script>
<script>
  //点击按钮完成提交数据
  const loginButton = document.getElementById('registerButton');
  loginButton.addEventListener('click', function() {
    //获取数据
    const username = document.querySelector( 'input[name="username" ]').value;
    const password = document.querySelector( 'input[name="password" ]').value;
    const email = document.   querySelector( 'input[name="email"    ]').value;
    const phone=document.     querySelector( 'input[name="phone"    ]').value;
    const checkCode=document. querySelector( 'input[name="checkCode"]').value;

    //  const name = document.querySelector('input[name="name"]').value;
    const fileInput = document.querySelector('input[name="file"]');
    // 使用 URLSearchParams 处理表单数据（自动编码特殊字符）
    const formData = new FormData();
    formData.append("username", username);
    formData.append("password", password);
    formData.append("email",email);
    formData.append("phone",phone);
    formData.append("checkCode",checkCode);
    formData.append("file", fileInput.files[0]);
    // 发送 POST 请求（不要设置 Content-Type）
      axios.post("/MVCDemo/auto/register", formData).then(function(resp) {
        const result=resp.data;
        if (result.code===200) {
            // 登录成功，跳转
            window.location.href ='space.html'
        } else {
            // 显示错误信息
            document.getElementById("register_err").style.display = 'block ';
            document.getElementById("register_err").textContent=result.message;
        }
    }).catch(function(error) {
      console.error("请求出错:", error);
    });
  })

  //检验密码是否在6-15位
  const passwordInput = document.getElementById("password");
  passwordInput.onblur=function (){
      // 获取密码值（去除空格）
        const password = passwordInput.value.trim();
        if(password.length>=6&&password.length<=15){
        document.getElementById("password_err").style.display='none';
      }else{
        document.getElementById("password_err").style.display='';
      }
    }

    //刷新验证码
  document.getElementById("changeImg").onblur = function (){
    document.getElementById("checkCodeImg").src="/MVCDemo/auto/checkCode?"+new Date().getMilliseconds()
  }

  //检测重名
  document.getElementById("username").onblur = function () {
      const username = this.value;
      axios({
      method: "get",
      url: "http://localhost:8080/MVCDemo/auto/checkName?username=" + username
    }).then(function (response) {
              // 在这里使用 response 对象来获取响应状态和数据
              //alert(this.responseText);
              //alert(typeof response.data);boolean类型
              if (response.status === 200) {
                if (response.data === true) {
                  document.getElementById("username_err").style.display = 'block';
                } else {
                  document.getElementById("username_err").style.display = 'none';
                }
              }
            })
            .catch(function (error) {
              console.error("请求出错:", error);
            });
  };
</script>

</body>
</html>